<template>
	<div class="adm2">
		<div class="tabs">
			<!-- 表格 -->
			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">热点图片</div>
						<div><el-button type="success" class="book-add" @click="dialogVisible = true">添加图片</el-button></div>
					</el-header>
					<el-table ref='checkall' :data='list' style='width: 100%;' max-height="480" border v-loading="isLoading"
						element-loading-text="加载中...">
						<!-- 名称 -->
						<el-table-column fixed prop='memo' label='描述'></el-table-column>
						<el-table-column prop='hot' label='热度'></el-table-column>
						<el-table-column prop='type' label='类型'></el-table-column>
						<el-table-column prop='tpublish' label='图片'>
							<template v-slot="scope">
								<div style="width: 70px;height: 70px;">
									<!-- <el-image> -->
									<el-image lazy :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`"
										style="width: 50px;height: 50px;"></el-image>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop='but' label='操作' fixed="right">
							<template v-slot="scope">
								<el-button type="danger" v-on:click="del(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>

		</div>

		<!-- 添加 -->
		<el-dialog v-model="dialogVisible" title="图片添加" width="30%">
			<el-form :model="formAdd" class="demo-form-inline" label-position="left">
				<el-form-item label="描述">
					<el-input v-model.lazy.trim="formAdd.memo" placeholder="请输入描述" />
				</el-form-item>
				<el-form-item label="热度">
					<el-input v-model.lazy.trim="formAdd.hot" placeholder="请输入热度" type="number" />
				</el-form-item>
				<el-form-item label="类型">
					<el-input v-model.lazy.trim="formAdd.type" placeholder="请输入类型" type="number" />
				</el-form-item>
				<el-form-item label="图片">
					<div style="margin-top: 15px; display: flex">
						<div style="display: flex">
							<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
								:before-upload="beforeUpload" :file-list="fileList" :on-change="handleChange" action="uploadAction"
								list-type="picture" accept=".jpg, .jpeg, .png, .gif">
								<h3>点击上传图片</h3>
							</el-upload>
						</div>
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="addPic">
						添加
					</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 分页 -->
		<!-- <div class="book-pagination">
			<el-pagination background layout="prev, pager, next" :total="tatol" :page-size='num' @current-change='arr'>
			</el-pagination>
		</div> -->

	</div>
</template>

<script>
import { showLoading } from "../../../utils/loading";
export default {
	name: 'Adm3',
	data () {
		return {
			list: [],  //接收请求来的数据
			checkall: [],	//整个表单的数据对象
			tatol: 6,
			num: 10,
			isLoading: true, //加载动画
			showLoading: showLoading, // 加载动画函数
			dialogVisible: false,
			formAdd: {
				memo: '',
				hot: '',
				type: ''
			},
			fileList: [], //图片
		}
	},
	methods: {

		//上传器的方法
		beforeUpload (file) {
			console.log("beforeUplaod");
		},
		handleChange (file, fileList) {
			this.fileList = fileList;
		},

		add () {
			this.$router.push('/adm/admadd')
		},


		addPic () {
			// 判断输入框是否为空
			if (this.formAdd.memo === '' || this.formAdd.hot === '' || this.formAdd.type === '') {
				this.$message({
					message: '输入框不能为空',
					type: 'warning'
				});
				return
			}
			// 判断图片是否为空
			if (this.fileList.length === 0) {
				this.$message({
					message: '图片不能为空',
					type: 'warning',
				});
				return
			}


			// 将需要打包的数据，append方式提交给对象
			let formData = new FormData();
			formData.append('memo', this.formAdd.memo);
			formData.append('hot', this.formAdd.hot);
			formData.append('type', this.formAdd.type);
			formData.append('pic', this.fileList[0].raw);
			this.isLoading = true;
			// 发起异步请求
			this.axios.post('/api/adm/hot/addHot', formData, {
				header: { 'Content-Type': 'multipart/form-data' }
			}).then((res) => {
				// 判断状态
				if (res.status === 200) {
					// 关闭弹窗
					this.dialogVisible = false;
					// 清空表单
					this.formAdd.memo = '';
					this.formAdd.hot = '';
					this.formAdd.type = '';
					this.fileList = [];
					// 重新渲染页面
					this.arr();
				}
			}).catch((error) => {
				console.log(error)
			})



		},


		del (x) {
			this.axios.delete('/api/adm/hot/delete/' + x).then((res) => {
				this.arr()
			}).catch((error) => {
				console.log(error)
			})
			console.log(x)
		},
		arr () {
			//发起异步请求
			this.axios.get('/api/adm/hot/findAll').then((res) => {
				//判断状态
				if (res.status === 200) {
					//向表格渲染数据
					this.list = res.data.data
					this.showLoading();
				}
			}).catch((error) => {
				console.log(error)
			})
		}
	},
	created () {
		this.arr()
	}
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: -20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}
</style>

